<template>
    <div class='inner'>
      <h3>Vue:Vue.js专业中文社区</h3>
      <div class="inner-info">您可以<router-link to="login">登录</router-link>或
      <a href="https://github.com">注册</a>,也可以</div>
      <a href="https://github.com" class="inner-login">通过&nbsp;GitHub&nbsp;登录</a>
    </div>
</template>
<script>
   
</script>
<style lang='less' scoped>
    .inner{
        padding:10px;
        background-color:#ffffff;
        border-radius:0 0 3px 3px;
        display: flex;
		flex-direction:column;
        align-items:center;

        h3{
            margin-top:3px;
        }
        .inner-info{
            font-size:13px;
            a{
                padding:0 5px;
                color:#787878;
                cursor:pointer;
                text-decoration:none;     

                &:hover{
                    text-decoration:underline;
                }
            }
        }
        .inner-login{
            display:block;
           margin:0 auto;
            width:152px;
            height:34px;
            line-height:34px;
            text-align:center;
            color:#ffff;
            background-color:#5bc0de;
            border:none;
            letter-spacing:2px;
            text-decoration:none;
           transition:all .2s ease-in-out;
           cursor:pointer;
           border-radius:3px;
           margin-top:10px;

           &:hover{
               background-color:#2f96b4;
           }
        }
    }
</style>